<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    /* canvas{border: solid 1px black;background:red;margin: 50px;padding: 50px;border-radius: 50%} */
    canvas{border: solid 1px black;}
  </style>
</head>
<body>
  <canvas id="cvs" width="400" height="200"></canvas>
</body>
<script>

  const cvs = document.querySelector("#cvs");
  // 获取画笔
  const c2d = cvs.getContext("2d")
  console.log(c2d);

  // 确定路径信息

  // 确定画笔的起点
  c2d.moveTo(100, 100);
  // 绘制到指定位置
  c2d.lineTo(300, 100);

  // 配置路径的样式
  c2d.lineWidth = 2;
  c2d.strokeStyle = "#000";
  // c2d.strokeStyle = "red";

  // 绘制
  c2d.stroke();
  
</script>
</html>